<template>
  <div>
      <a-button type="primary" @click="showModal" maskClosable="false">
          <span class="iconfont icon-zengjiatianjiajiahao"></span>
          <span>新增用户</span>
      </a-button>
      <a-modal
        v-model="visible"
        title="新增用户"
        @ok="handleOk"
        :maskClosable="false"
        :footer="null"
        :centered="true"
        class="popupWindow"
      >
          <div class="content">
              <div class="name">
                  <span>用户昵称:</span>
                  <a-input placeholder="用户昵称" v-model="userMessage.nickname"/>
              </div>
              <!-- <div class="name">
                  <span>真实姓名:</span>
                  <a-input placeholder="真实姓名" v-model="userMessage.rightname"/>
              </div> -->
              <div class="name">
                  <span>联系方式:</span>
                  <a-input placeholder="联系方式" v-model="userMessage.phone"/>
              </div>
              <div class="name">
                  <span>目标方向:</span>
                  <a-input placeholder="目标方向" v-model="userMessage.goal"/>
              </div>
              <div class="name">
                  <span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</span>
                  <a-input placeholder="年级" v-model="userMessage.grade"/>
              </div>
              <div class="name">
                  <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
                  <a-input placeholder="以字母开头的字符串" v-model="userMessage.userId"/>
              </div><div class="name">
                  <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
                  <a-input placeholder="密码" v-model="userMessage.password"/>
              </div>
              <div class="poster">
                  <span>选择头像:</span>
                  <div class="select-photo" ref="imgs">
                      <img :src="item" alt="" v-for="(item,index) in imgUrls" :key="index" class="" @click="selectPhoto($event,index)">
                  </div>
                  <!-- <div class="clearfix">
                      <a-upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        list-type="picture-card"
                        :file-list="fileList"
                        @preview="handlePreview"
                        @change="handleChange"
                      >
                        <div v-if="fileList.length < 8">
                          <a-icon type="plus" />
                          <div class="ant-upload-text">Upload</div>
                        </div>
                      </a-upload>
                      <a-modal
                        :visible="previewVisible"
                        :footer="null"
                        @cancel="handleCancel"
                      >
                        <img alt="example" style="width: 100%" :src="previewImage" />
                      </a-modal>
                  </div> -->
              </div>
              <div class="button">
                  <a-button> 取消 </a-button>
                  <a-button type="primary" @click="register"> 提交 </a-button>
              </div>
          </div>
      </a-modal>
  </div>
</template>
<script>
import reqwest from "reqwest";
import { message } from 'ant-design-vue';
import imgUrls from '../../utils/imgsData'
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  // props:['headUrl'],
  components: {},
  data() {
    return {
      //头像资源
      imgUrls,
      index: 0,
      //用户注册信息
      userMessage: {
          nickname: '',
          rightname: '',
          userId: '',
          password: '',
          phone: '',
          grade: '',
          goal: '',
          headUrl: 'http://api.btstu.cn/sjtx/api.php'
      },
      visible: false,
      fileList: [],
      uploading: false,

      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: "-1",
          name: "image.png",
          status: "done",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
      ],
    };
  },
  methods: {
    //创建头像
    selectPhoto(e,index) {
        // console.log('e',e);
        // console.log('imgs',this.$refs.imgs.children);
        let imgs = [...this.$refs.imgs.children]
        imgs.forEach((item,index)=> {
            item.style.border = ''
        })
        // console.log('imgs',imgs);
        e.target.style.border='2px solid #439FFF'
        // console.log('e',index);
        // this.userMessage.headUrl = this.imgUrls[index]
        // console.log('url',this.userMessage.headUrl);
        this.index = index
        // console.log('index',this.index);
        // console.log('url',this.imgUrls[this.index]);

    },
    //创建新账号
    async register(){
        console.log('this',this._data.index);
        
        let res = await this.$api.register({
            userId: this.userMessage.userId,
            password: this.userMessage.password
        })
        console.log('this.imgUrls[this.index]',this.imgUrls[this.index]);
        let res2 = await this.$api.editUsersMessage({
            userId: this.userMessage.userId,
            phone: this.userMessage.phone,
            grade: this.userMessage.grade,
            goal: this.userMessage.goal,
            headUrl: this.imgUrls[this.index],
            nickname: this.userMessage.nickname
        })
        if(res2.code == 200) {
            message.success('账号添加成功');
            this.userMessage.userId = '',
            this.userMessage.password = '',
            this.userMessage.phone = '',
            this.userMessage.grade = '',
            this.userMessage.goal = '',
            this.userMessage.headUrl = ''
            this.userMessage.nickname = ''
        }
        else {
            message.error('账号添加失败')
        }
        
        console.log('res',res2);
    },
    showModal() {
        this.visible = true;
    },
    handleOk(e) {
        console.log(e);
        this.visible = false;
    },
    handleRemove(file) {
        const index = this.fileList.indexOf(file);
        const newFileList = this.fileList.slice();
        newFileList.splice(index, 1);
        this.fileList = newFileList;
    },
    beforeUpload(file) {
        this.fileList = [...this.fileList, file];
        return false;
    },
    handleUpload() {
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach((file) => {
          formData.append("files[]", file);
        });
        this.uploading = true;

        // You can use any AJAX library you like
        reqwest({
          url: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
          method: "post",
          processData: false,
          data: formData,
          success: () => {
            this.fileList = [];
            this.uploading = false;
            this.$message.success("upload successfully.");
          },
          error: () => {
            this.uploading = false;
            this.$message.error("upload failed.");
          },
        });
    },
    handleCancel() {
        this.previewVisible = false;
    },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
              file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
    },
    handleChange({ fileList }) {
        this.fileList = fileList;
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/ .ant-modal-content {
  width: 700px;
  height: 700px;
}
// /deep/ .ant-modal-content {
//     top: -100px;
// }
.content {
  span {
    margin-right: 10px;
  }
  .name {
    margin-bottom: 10px;
    .ant-input {
      width: 200px;
    }
  }
  .special {
    margin-bottom: 10px;
    .ant-select {
      width: 200px !important;
    }
  }
  .domType {
    margin-bottom: 10px;
    .ant-select {
      width: 200px !important;
    }
  }
  .upload {
    margin-bottom: 10px;
  }
  .poster {
    margin-bottom: 10px;
    .select-photo {
        display: flex;
        flex-wrap: wrap;
        img {
          box-sizing: border-box;
          width: 80px;
          height: 80px;
          margin-left: 40px;
          margin-top: 20px;
        }
    }
  }
  .describe {
    margin-bottom: 10px;
  }
  .permissions {
    margin-bottom: 10px;
  }
  .button {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
    padding: 0 200px;
    //   border: 1px solid red;
  }
}
</style>
